<!-- 登录组件 -->
<template>
    <el-container class="register-login login register-login-bg">
        <div class="register-phone-box login-phone-box">
            <div class="login-text"><img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/login-text.png" alt=""></div>
            <el-row class="register-phone-con login-phone-con">
                <el-col :span="12"><div class="phone-title-left">欢迎登录</div></el-col>
                <el-col :span="12"><div class="phone-title-right"><el-button type="text" class="register-btn-text">没有账号?</el-button><el-button type="text" @click="toRegister" class="login-font-color">请注册</el-button></div></el-col>
                <el-col :span="24">
                    <div class="register-form-int">
                        <el-form :model="form" ref="form" :rules="rules" label-width="80px" class="demo-ruleForm" @keydown.enter.native="login()">
                            <el-form-item label="手机号：" prop="username">
                                <el-input class="register-int" v-model="form.username" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                            <el-form-item label="密码：" prop="password">
                                <el-input class="register-int" type="password" v-model="form.password" placeholder="请输入密码"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="foget-pass">
                        <el-button type="text" class="register-btn-link" @click="$router.push('/foregetPassword')">忘记密码?</el-button>
                    </div>
                    <div class="register-btn login-btn">
                        <el-button type="primary" @click="login">登录</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <DialogInput ref="chooseEnte" title="选择企业">
            <el-row>
                <el-col :span="24" class="rem-dialog-con">
                    <div class="grid-content bg-purple-dark choose-enter" v-for="item in loginEnter" :key="item.enterprise_id" @click="checkEnter(item)">
                        {{item.enterprise_name}}
                    </div>
                </el-col>
            </el-row>
        </DialogInput>
    </el-container>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import DialogInput from '@component/common/DialogInput.vue';
    import { Mutation } from 'vuex-class';
    import { mapState, mapGetters, mapMutations } from 'vuex';
    @Component({
        components: {
            DialogInput
        },
        computed: {
            ...mapState([
                'userInfo'
            ])
        }
    })
    export default class Login extends Vue {
        @Mutation setUser;
        form = {
            username: '',
            password: ''
        }
        rules = {
            username: [
                {required: true, message: '请输入手机号', trigger: 'blur'},
                {
                    pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                    max: 11,
                    message: '请输入正确的手机号',
                    trigger: 'blur'
                }
            ],
            password: [
                {required: true, message: '请输入密码', trigger: 'blur'},
                {min: 6, message: '请输入最少6位的密码', trigger: 'blur'}
            ]
        }
        loginEnter = [];
        // 用户登录
        loginCustomer (loginForm: Object) {
            this.$http.post('customers/customerLogin', loginForm)
                .then((response)=>{
                    if(response.status == 201){
                        let { 
                            token,
                            customer_id,
                            enterprise_name,
                            customer_name,
                            enterprise_id,
                            corpNo
                        } = response.data;
                        let userInfo = {
                            customer_id,
                            enterprise_id,
                            enterprise_name,
                            customer_name,
                            corpNo
                        }
                        localStorage.setItem('Authorization', token);
                        this.setUser(userInfo);
                        this.jumpPage(userInfo);
                    }
                })
        }
        async jumpPage (userInfo) {
            //未登陆时速贴主页点击申请开通时跳转过来的
            if(location.href.indexOf('speedDiscount')>-1){
                //判断登录用户速贴开户状态
                let res = await this.$http.get('fbank/enterprise/queryStatusInfo', {}, { loading: false })
                if(res.status < 300 && res.data){
                    //等待审核 或者 申请开通成功的都跳转到速贴主页，否则去速贴注册页
                    if(res.data.fBank_enterprise_status == 3 || res.data.fBank_enterprise_status == 5 || res.data.fBank_enterprise_status == 6){
                        location.href = 'discount.html'
                    }else{
                        location.href = 'user.html#/speedDiscount'
                    }
                }else{
                    location.href = 'user.html#/speedDiscount'
                }
                return false
            }
            //未登录跳时速贴查询转过来的
            if(location.href.indexOf('discount.html')>-1){
                location.href = 'discount.html'
                return false
            }
            let backUrl = /back=.+$/.exec(location.hash);
            //查看信息完整度，小额鉴权成功后的账户跳转到首页，其他的跳到我的交易
            let params = {
                customerId1: userInfo.customer_id,
                enterpriseId: userInfo.enterprise_id
            }
            this.$http.get('customerInfoStatus/queryCustomerInfoStatus',{params}, { loading: false }).then((res)=>{
                if(res.status == 200 && res.data){
                    if(res.data.accountBinding == 2){
                        location.href = backUrl && backUrl.length == 1 ? backUrl[0].split('=')[1] : "/index.html";
                    }else{
                        location.href = 'trade.html'
                        // location.href = backUrl && backUrl.length == 1 ? backUrl[0].split('=')[1] : "/trade.html";
                    }
                }
            })
        }
        //去注册
        toRegister () {
            if(location.href.indexOf('speedDiscount')>-1){
                location.href = 'user.html#/register?back=discount.html'
            }else{
                location.href = 'user.html#/register'
            }
        }
        // 点击登录
        login () {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    let form = this.form;
                    this.$http.post('customers/customerLoginEnterprise', form, {}, { loading: false })
                        .then((response) => {
                            this.loginEnter = response.data.enterprises;
                            if(response.data.enterprises.length == 1) {
                                let loginForm = {
                                    username: this.form.username,
                                    password: this.form.password,
                                    enterprise_id: response.data.enterprises[0].enterprise_id
                                }
                                this.loginCustomer(loginForm);
                            }else {
                                this.$refs['chooseEnte'].openDialog();
                            }
                        })
                }
            })
        }
        // 多企业的时候选择企业
        checkEnter (item: any) {
            let loginForm = {
                username: this.form.username,
                password: this.form.password,
                enterprise_id: item.enterprise_id
            }
            this.loginCustomer(loginForm);
        }
        created () {
            //检查是否登录
            if(this.userInfo) {
                this.jumpPage(this.userInfo);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .login-phone-box {
        width: 480px;
        background-image: url("https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/login-bg-box1.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        margin-top: 191px;
        margin-bottom: 190px;
    }
    .login-text {
        position: absolute;
        top: -30px;
        left: 85px;
        img {
            width: 309px;
            height: 36px;
        }
    }
    .login-phone-con {
        padding: 28px 40px 35px 40px;
    }
    .foget-pass {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 12px;
    }
    .login-btn {
        margin-top: 0;
        margin-left: 80px;
        .el-button{
            padding: 0;
        }
    }
    .choose-enter {
        cursor: pointer;
        height: 32px;
        line-height: 32px;
        &:hover {
            background: $__color-primary;
            color: #fff;
        }
    }
</style>